<template>
  <div>
    <a-page-header
      style="border-top: 1px solid rgb(235, 237, 240)"
      title="返回"
      @back="() =>{this.$router.go(-1)} "
    />
    <div class="content-box" v-loading="loading">
      <a-tabs @change="tabChange" defaultActiveKey="-1" animated>
        <a-tab-pane key="-1" tab="全部" class="tab-pane">
          <div v-for="(item,index) in list" :key="index">
            <a-card hoverable v-if="item.object" :title="item.object.name">
              <template #extra>
                <a-tag v-if="item.type == 0" color="green">机构</a-tag>
                <a-tag v-else-if="item.type == 1" color="blue">课程</a-tag>
                <a-tag v-else color="orange">讲师</a-tag>
                <a @click="enterTo(item.type,item.object)" href="#">查看</a>
                <a-popconfirm
                  title="确认移除该内容吗?"
                  ok-text="确认"
                  cancel-text="再想想"
                  @confirm="canCollect(item.id)"
                >
                  <a href="#" style="color:#ff393d;margin-left:5px;">移除</a>
                </a-popconfirm>
              </template>
              <p>{{item.object.intro}}</p>
              <p style="text-align:right;margin-top:5px;">收藏于：{{ item.collectTime }}</p>
            </a-card>
          </div>
        </a-tab-pane>
        <a-tab-pane :key="item1.key" v-for="item1 in tabList" :tab="item1.tab" class="tab-pane">
          <div v-for="(item,index) in list" :key="index">
            <a-card hoverable v-if="item.object" :title="item.object.name">
              <template #extra>
                <a-tag v-if="item.type == 0" color="green">机构</a-tag>
                <a-tag v-else-if="item.type == 1" color="blue">课程</a-tag>
                <a-tag v-else color="orange">讲师</a-tag>
                <a @click="enterTo(item.type,item.object)" href="#">查看</a>
                <a-popconfirm
                  title="确认移除该内容吗?"
                  ok-text="确认"
                  cancel-text="再想想"
                  @confirm="canCollect(item.id)"
                >
                  <a href="#" style="color:#ff393d;margin-left:5px;">移除</a>
                </a-popconfirm>
              </template>
              <p>{{item.object.intro}}</p>
              <p style="text-align:right;margin-top:5px;">收藏于：{{ item.collectTime }}</p>
            </a-card>
          </div>
        </a-tab-pane>
      </a-tabs>
      <Pagination :params="params" :total="total" style="bottom: -60px;" @method="queryCollection" />
    </div>
  </div>
</template>

<script>
import {
  canCollect,
  queryCollection,
  getOrgById,
  getlecturerById,
  getCourseById
} from '@/api/collect'
import Pagination from '../components/Pagination.vue'
export default {
  components: { Pagination },
  data() {
    return {
      activeKey: undefined,
      tabList: [
        { key: 0, tab: '机构' },
        { key: 1, tab: '课程' },
        { key: 2, tab: '讲师' }
      ],
      list: [],
      show: true,
      loading: false,
      params: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0
    }
  },

  mounted() {
    this.loading = true
    this.queryCollection(this.params)
  },
  methods: {
    tabChange(a) {
      console.log(a)
      this.list = []
      if (a == -1) {
        this.activeKey = undefined
      } else {
        this.activeKey = a
      }
      this.queryCollection(this.params)
    },
    async queryCollection(params) {
      let param = { ...params, type: this.activeKey }
      let { code, msg, rows, total } = await queryCollection(param)
      if (code == 200) {
        this.total = total
        rows.forEach(async item => {
          if (item.type == 0) {
            let { code, msg, data } = await getOrgById(item.collectId)
            if (code == 200) {
              this.$set(item, 'object', data)
              console.log(item)
            }
          } else if (item.type == 1) {
            let { code, msg, data } = await getCourseById(item.collectId)
            if (code == 200) {
              this.$set(item, 'object', data)
              console.log(item)
            }
          } else if (item.type == 2) {
            let { code, msg, data } = await getlecturerById(item.collectId)
            if (code == 200) {
              this.$set(item, 'object', data)
              console.log(item)
            }
          }
        })
        this.list = rows
        this.loading = false
        console.log(this.list, 'adffds')
      }
    },
    async canCollect(id) {
      let { code, msg } = await canCollect(id)
      if (code == 200) {
        this.$message.info('已移除该内容,喜欢的内容随时可以添加到收藏中心~')
        this.loading = true
        this.queryCollection(this.params)
      }
    },
    enterTo(type, item) {
      console.log(type, item)
      if (type == 0) {
        this.$router.push({
          path: 'orgDetail',
          query: { id: item.id }
        })
      } else {
        if (type == 1) {
          let id = item.organization.id
          this.$router.push({
            path: 'orgDetail',
            query: { id, itemId: item.id, type: 2 }
          })
        } else {
          let id = item.orgId
          this.$router.push({
            path: 'orgDetail',
            query: { id, itemId: item.id, type: 1 }
          })
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
:deep .ant-tabs-nav {
  display: flex;
  text-align: center;
  font-size: 18px;
}
.content-box {
  position: relative;
  width: 85%;
  margin: 0 auto;
}
.tab-pane {
  
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}
</style>